<%-- 
    Document   : class-modify
    Created on : Feb 15, 2012, 2:50:40 PM
    Author     : lab
--%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="../handler/class-modify-action.jsp" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Class details</title>
        <link rel="stylesheet" type="text/css" href="../style/list-style.css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">            
            $(document).ready(function() {
                $('#search').keyup(function() {
                    var number = $('#search').val();
                    $.ajax({
                        type: 		"post",
                        url: 		"search.jsp",
                        data: 		"search=" + number,
                        success:	function(msg) {  
                            //$("#email-list").html("<h3>" + msg + "</h3>");
                            show(msg);
                        }
                    });
                    //return false;               

                });                
            });           
            
            function show(xml){
                //alert(xml);
                var xmlDoc= $.parseXML(xml);
                //$xml=$(xmlDoc);
                var row=""
                row+=("<ul>");
                $(xmlDoc).find('user').each(function(){
                    var name=$(this).find('name').text();
                    var email=$(this).find('email').text();
                        
                    row+=("<li>"+name+"<a onclick='getValue(this)' href='javascript:return false;'>"+email+"</a></li>");
                        
                    //alert(name+":"+username);
                });
                row+="</ul>"
                $('#hint').html(row);
                $('#hint').show();
            }
            function getValue(e){    
                var st=$('#email-list').val();
                st=st.trim();
                if(st!="")st+=(", "+$(e).text());
                else st+=($(e).text());
                $('#email-list').html(st);
                $('#hint').hide();
            }
            function setValue(idx){
                document.getElementById("selected-item-id").value=idx;
            }
            function remove(){
                var idx=document.getElementById("selected-item-id").value;
                $.ajax({
                    type:"POST",
                    url:"../handler/class-modify-removestudent-action.jsp",
                    data:"class-id=${class.id}&student-id="+idx,
                    success:function(msg){
                        msg=msg.trim();
                        if(msg==1) {
                            alert("Student is removed from current class");
                            $('#row-'+idx).remove();
                        }
                        else alert("Action failed");
                    }                    
                })
            }
        </script>
    </head>
    <body>

        <form action="#" method="post">
            <table>
                <tr>
                    <td>Class name: </td>
                    <td><input type="text" name="name" value="${class.name}"/></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Public:</td>
                    <td><input type="checkbox" name="is-public" ${cls.isPublic?' selected ':''} /></td>
                    <td></td>

                </tr>

                <tr>
                    <td></td>
                    <td><input type="submit" name="update" value="Save changes"/></td>
                    <td></td>
                </tr>
            </table>
        </form>
        <form action="#" method="post">
            <table class="data-table">
                <tr>
                    <th>Student</th>
                    <th>Username</th>
                    <th>Gender</th>
                    <th>Date of birth</th>
                    <th>Email</th>
                    <th></th>
                </tr>
                <c:forEach var="student" items="${list}">
                    <tr id="row-${student.id}">
                        <td>${student.firstName}  ${student.lastName}</td>
                        <td>${student.username}</td>
                        <td>${student.gender?"Male":"Female"}</td>
                        <td><fmt:formatDate pattern="MMM dd, yyyy" value="${student.dateOfBirth}"/></td>
                        <td>${student.email}</td>
                        <td>
                            <a href="?pcontent=profile&id=${student.id}">Profile</a> | 
                            <a href="javascript:showConfirm();" onclick="setValue(${student.id})">Remove</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>
            <table>
                <tr>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <td>Search: </td>
                    <td>

                        <input type="text"  name="search"  id="search"/>
                        <div id="hint" class="hint"></div>

                    </td>
                    <td></td>
                </tr>                
                <tr id="last-row">
                    <td>Email list:</td>
                    <td colspan="2">
                        <textarea cols="50" rows="10" name="email-list" id="email-list"></textarea>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="add-student" name="add-student" value="Add"/></td>
                    <td></td>
                </tr>
            </table>

            <input type="hidden" name="selected-item-id" id="selected-item-id"/>
            <div class="confirm-box">
                <div>Are you sure want to continue?</div>
                <input type="button" name="delete" value="Delete" onclick="remove();"/>
                <input type="button" name="hide" value="Cancel" onclick="hideConfirm();"/>
            </div>
            <input type="hidden" name="classid" value="<%=request.getParameter("classid")%>"/>
        </form>
    </body>
</html>
